<template>
  <div class='m-customerFollowUp'>
    <div class="title">
      <div class="name">{{ phone }} {{ name }}</div>
      <el-button type='primary' @click='addFollowUpContent'>添加</el-button>
    </div>
    <!-- table -->
    <a-table :data='data' :cols='tableKeys'>
      <!-- <el-table-column align="center" label="操作" width='240' slot='ahead'>
        <template slot-scope="scope">
          <div class='m-firmDepartment-table-handle'>
            <el-button size='mini' @click='toUpdate(scope.row)'>修改</el-button>
            <el-button size='mini' @click='deleteCourse(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column> -->
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>
    <el-dialog
      title="跟进内容"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <el-input type='textarea' v-model.trim='content' :rows='5' />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="requestAddContent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'm-customerFollowUp',

  data() {
    const filterTime = (value) => {
      const oDate = new Date(+(value + '000'))
      return window.$tools.formatDate(oDate)
    }
    return {
      phone: '1453535',
      name: 'ddd',
      tableKeys: [
        { prop: 'time', label: '跟进时间', minWidth: '100', filter: filterTime },
        { prop: 'content', label: '跟进内容', minWidth: '200' },
        { prop: 'creator_name', label: '跟进人', minWidth: '100' }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      id: '',
      content: '',
      dialogVisible: false
    }
  },

  mounted() {
    const { id, phone, name } = this.$route.query
    if (!id) {
      return this.$router.replace({ name: 'home' })
    }
    this.id = id
    this.phone = phone
    this.name = name
    this.$refs.page.changePage()
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      return this.$api.crmGetSaleRecords({
        aIntentId: this.id,
        aPageNum,
        aPageSize
      })
    },

    getData(data) {
      this.data = data
    },

    toUpdate() {},

    deleteCourse() {},

    addFollowUpContent() {
      this.content = ''
      this.dialogVisible = true
    },

    async requestAddContent() {
      if (!this.content) {
        return this.__notify('警告', '请输入内容', 'warning')
      }
      const { code } = await this.$api.crmCreateSaleRecord({
        aIntentId: this.id,
        aContent: this.content
      })
      if (code === 0) {
        this.__notify('成功', '添加根据内容')
        this.dialogVisible = false
        this.$refs.page.changePage()
      }
    },

    handleClose() {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang='less'>
.m-customerFollowUp {
  .title {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    .name {
      padding-right: 20px;
      font-size: 14px;
    }
  }
}
</style>